<template>
  <div class="subpage cinemas" v-if="film">
    <my-head :title="film.name" :back="true">
      <van-icon name="revoke" size="36" class="icon"></van-icon>
    </my-head>
    <div class="cinnav">
      <van-tabs
        v-model="current"
        sticky
        animated
        swipeable
        color="#ff5f16"
        title-active-color="#ff5f16"
        line-width="80px"
      >
        <van-tab
          :name="i"
          v-for="(l, i) in showCinemas"
          :key="i"
          :title="(l.showDate * 1000) | timeFormat('YYYY-MM-DD')"
        >
          <clist
            :list="cinemas"
            :filmId="film.filmId"
            :time="showCinemas[current].showDate"
          >
          </clist>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import clist from "../../components/clist.vue";
export default {
  components: { clist },
  data() {
    return {
      film: null,
      showCinemas: [],
      cinemas: [],
      current: 0,
    };
  },
  methods: {
    getCurrentCinemas(current) {
      // 请求当前播放电影的电影院list
      this.$ajax
        .postMaiData(
          {
            cityId: this.city.cityId,
            cinemaIds: this.showCinemas[current].cinemaList.join(","),
          },
          {
            "X-Host": "mall.film-ticket.cinema.batch-cinema",
          }
        )
        .then((res) => {
          this.cinemas = res.data.cinemas;
        });
    },
  },
  watch: {
    current(v) {
      this.getCurrentCinemas(v);
    },
  },
  mounted() {
    // 获取电影详情
    this.$ajax
      .getMaiData(
        {
          filmId: this.$route.params.filmId,
        },
        {
          "X-Host": "mall.film-ticket.film.info",
        }
      )
      .then((res) => {
        this.film = res.data.film;
      });

    // 获取当前电影播放的日期时间列表
    this.checkHasCityInfo(() => {
      this.$ajax
        .getMaiData(
          {
            filmId: this.$route.params.filmId,
            cityId: this.city.cityId,
          },
          {
            "X-Host": "mall.film-ticket.cinema.film-show-cinema",
          }
        )
        .then((res) => {
          this.showCinemas = res.data.showCinemas;

          // 请求当前播放电影的电影院list
          this.$ajax
            .postMaiData(
              {
                cityId: this.city.cityId,
                cinemaIds: this.showCinemas[this.current].cinemaList.join(","),
              },
              {
                "X-Host": "mall.film-ticket.cinema.batch-cinema",
              }
            )
            .then((res) => {
              this.cinemas = res.data.cinemas;
            });
        });
    });
  },
};
</script>


<style lang="scss" scoped>
</style>
